<template>
  <div>
    <!-- <div class="info-item">
      <span>姓名</span>
      <span>{{user.name}}</span>
    </div >
    <div class="info-item">
      <span>年龄</span>
      <span>{{user.age}}</span>
    </div >
    <div class="info-item">
      <span>性别</span>
      <span>{{user.sex}}</span>
    </div >
    <div class="info-item">
      <span>手机号</span>
      <span>{{user.phone}}</span>
    </div >
    <div class="info-item">
      <span>家庭地址</span>
      <span>{{user.address}}</span>
    </div > -->
    <!-- 用es6新特性优化UI 用map替代json-->
    <div class="info-item" v-for="[label,value] in infoMap" :key="value">
      <span>{{label}}</span>
      <span>{{value}}</span>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      user:{
        name:"方方",
        age:17,
        sex:'男',
        phone:1991111111,
        home:'范家'
      },
      infoMap:new Map()
    }
  },
  mounted() {
    const mapKeys=['姓名','年龄','性别','电话','家庭地址']
    const result=new Map();
    let i=0;
    for(const key in this.user){
      result.set(mapKeys[i],this.user[key]);
      i++
    }
    this.infoMap=result
  },
}
</script>